<template>
  <el-row
    type="flex"
    justify="space-between"
    align="middle"
    style="height: 40px;width:100%;"
  >
    <el-col>
      <span>{{ treeNode.name }}</span>
    </el-col>
    <el-col :span="4">
      <el-row type="flex" justify="end">
        <!-- 两个内容 -->
        <el-col>{{ treeNode.manager }}</el-col>
        <el-col>
          <!-- 下拉菜单 element -->
          <el-dropdown @command="handleCommand">
            <span> 操作<i class="el-icon-arrow-down" /> </span>
            <!-- 下拉菜单 -->
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="add">添加子部门</el-dropdown-item>
              <el-dropdown-item v-if="!isRoot" command="edit">编辑子部门</el-dropdown-item>
              <!-- 思路没有任何问题，如果今天这个组件是自己封装的，那么这样写完全OK，但是如果用的是第三方组件库，就要组件是否支持 -->
              <!-- <el-dropdown-item v-if="!isRoot" @click="delFn">删除子部门</el-dropdown-item> -->
              <el-dropdown-item v-if="!isRoot" command="del">删除子部门</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </el-col>
      </el-row>
    </el-col>
  </el-row>
</template>

<script>
import { delDepartment } from '@/api/department'
export default {
  props: {
    treeNode: {
      type: Object,
      required: true
    },
    // 公共抽离，异步逻辑
    // 可以将组建封装的足够复杂，在使用的过程中，通过传递变量来控制组建的展示内容
    // 总结：在封装组件的时候，先做加法(将组建可能实现的所有功能添加进来)，后做减法(根据组件使用过程中传递的变量来决定功能的使用)
    isRoot: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    handleCommand(type) {
      switch (type) {
        // 1.case一个值的时候是进行了===判断
        // 2.每一个case最后面都是要跟上break
        // 3.default是用来处理默认的逻辑
        case 'add':
          // 通知父组件，该表isShowDialog的状态\
          this.$emit('showDialog', this.treeNode)
          break
        case 'edit':
          // 编辑的弹层和新增的弹层基本都是相同的
          // 知识点1:$emit可以传递多个参数
          this.$emit('showDialog', this.treeNode, true)
          break
        case 'del':
          // 进行删除操作
          // 1.进行二次确认(避免风险操作，进行弹窗确认)
          this.$confirm('此操作将永久删除该部门, 是否继续?').then(() => {
            // 点击删除进入.then
            // 2.调接口(让后台执行删除操作，删除数据)
            return delDepartment(this.treeNode.id)
          }).then(() => {
            // 删除成功进入.then
            // 3.更新视图(让前台展示的数据和后台同步)
            this.$emit('delDepart')
            // 4.提示用户操作结果(弹窗告诉用户到底有没有删除成功)
            this.$message.success('删除部门成功')
          })
          break
      }
    }
  }
}
</script>

<style>

</style>
